<template>
  <div></div>
</template>

<script>
import * as dat from 'dat.gui'

export default {
  name: 'ElevenOne',
  mounted() {
    this.initControl();
  },
  methods: {
    initControl() {
      const gui = new dat.GUI();
      const controls = {
        numberInput: 0.2,
        numberSlider: 3,
        numberMin: 3,
        numberMax: 3,
        numberStep: 3,
        numberSelect: 1,
        numberMix: 1,
        stringInput: 'test',
        stringSelect: 'test1',
        checkbox: true,
        fn: function() {
          console.log('自定义函数')
        },
        CssString: '#ffffff',
        RGB: [0, 128, 255],
        RGBA: [0, 128, 255, 0.3],
        HSL: {h: 350, s: 0.9, v: 0.3},
        onChange: '#ffffff',
        onFinishChange: 1,
        onChangeHex: 0xffffff,
      }

      const numberFolder = gui.addFolder('Number类型');
      numberFolder.add(controls, 'numberInput')
      numberFolder.add(controls, 'numberSlider', 0, 10)
      numberFolder.add(controls, 'numberMin').min(0)
      numberFolder.add(controls, 'numberMax').max(10)
      numberFolder.add(controls, 'numberStep').step(0.2)
      numberFolder.add(controls, 'numberSelect', {
        selectOption1: 1,
        selectOption2: 2,
        selectOption3: 3,
      })
      numberFolder.add(controls, 'numberMix', 0, 10).step(0.2)

      const stringFolder = gui.addFolder('String类型');
      stringFolder.add(controls, 'stringInput')
      stringFolder.add(controls, 'stringSelect', ['test1', 'test2', 'test3'])

      const checkboxFolder = gui.addFolder('Boolean类型');
      checkboxFolder.add(controls, 'checkbox')

      const fnFolder = gui.addFolder('自定义函数类型');
      fnFolder.add(controls, 'fn')

      const colorFolder = gui.addFolder('颜色类型');
      colorFolder.addColor(controls, 'CssString')
      colorFolder.addColor(controls, 'RGB')
      colorFolder.addColor(controls, 'RGBA')
      colorFolder.addColor(controls, 'HSL')

      const callbackFolder = gui.addFolder('回调函数');
      callbackFolder.addColor(controls, 'onChange').onChange(value => {
        console.log('onChange值：' + value)
      })
      callbackFolder.add(controls, 'onFinishChange', 0, 10).onFinishChange(value => {
        console.log('onFinishChange值：' + value)
      })
      callbackFolder.addColor(controls, 'onChangeHex').onChange(value => {
        console.log('onChangeHex值：' + value)
      })
    }
  }
}
</script>

<style scoped>
</style>
